<style scoped lang="less">
	.index {
		width: 100%;
		.row {
			width: 80%;
			margin: 0 auto;
	margin-top: 85px;
			.left_content {
				width: 66.667%;
				float: left;
			}
			.right_content {
				width: 33.333%;
				float: left;
			}
		}
		#menu {
			display: none;
			position: fixed;
		    left: 0.5%;
		    top: 50%;
		    transform: translateY(-50%);
		    width: 32px;
		    height: 38px;
		    background: rgba(0,0,0,0.25);
		    text-align: center;
		    border-radius: 5px;
		    z-index: 999;
		}
		#menu:hover{
			 background: rgba(0,0,0,0.5);
		}
	}
	
	@media only screen and (max-width: 640px) {
		.index {
			width: 100%;
			.row {
				width: 90%;
				.left_content {
					width: 100%;
					
				}
				.right_content {
					position: relative; 
					z-index: 99;
					background: #FFFFFF;
					display: none;
				}
			}
			#menu {
				display: block;
				
			}
		}
	}
</style>
<template>
	<div class="index">

		<Head> </Head>
		<Row class="row">
			<div class="left_content">
				<ArticleContent></ArticleContent>
				<Comments></Comments>
			</div>
			<div class="right_content">
				<Right></Right>
			</div>
		</Row>
		<div id="menu" @click="showMenu">
			<Icon type="ios-arrow-forward" size='38' color='white'/>
		</div>
		<Foot></Foot>
		<BackTop></BackTop>
	</div>
</template>
<script>
	import Head from '../template/header'
	import Foot from '../template/foot'
	import Right from '../template/right'
	import ArticleContent from '../template/articleContent'
	import Comments from '../template/comments'
	export default {
		components: {
			Head,
			Foot,
			Right,
			ArticleContent,
			Comments
		},
		data() {
			return {
				data: ''
			}
		},
		methods: {
			showMenu(){
				var leftDisplay=document.querySelector('.left_content').style.display;
				if(leftDisplay=='block'){
					document.querySelector('.left_content').style.display='none'
			    	document.querySelector('.right_content').style.display='block'
				}else{
					document.querySelector('.left_content').style.display='block'
			    document.querySelector('.right_content').style.display='none'
				}
				
			},
		},

	}
</script>